import React , { useState ,useEffect , useMemo} from 'react'
import './lfr_indent.css'
import { LeftOutline ,SearchOutline,HistogramOutline  } from 'antd-mobile-icons'
import { useNavigate ,useLocation} from 'react-router-dom'
import axios from 'axios'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile';

const InfiniteScrollContent = ({ hasMore }) => {
  return (<>
    {hasMore ? (<>
        <span>Loading</span>
        <DotLoading />
      </>) : (<span>--- 我是有底线的 ---</span>)}
  </>);
};

export default function Indent() {
    const navigate = useNavigate()
    const [sort, setsort] = useState(['全部', '待付款', '未使用', '已取消'])
    const [list,setlist] =useState([])
    const [id,setid]=useState('全部')
    const [hasMore, setHasMore] = useState(true);
    const [len,setlen]=useState(3)
    const {state}=useLocation()

    async function loadMore() {
        setTimeout(()=>{
          setlen(len+3)
          setHasMore(len<list.length);
         },3000)
    }
  
    const getlist=()=>{
      axios.get(`http://127.0.0.1:3000/lfr_index/indent?names=${name}`).then(res => {
        console.log(res.data);
        setlist(res.data)
      })
    }
  
    const newlist=useMemo(()=>{
      const list1=[...list]
       if(id=='全部'){
        return list1
       }else {
        return list1.filter(item=>item.type==id)
       }
    })
  
 
  
    useEffect(()=>{
      getlist()
    },[])
  
  return (
    <div className='indent'>
        <div className='diva1'>
        <div className='div1'>
          <p className='p' onClick={() => { navigate('/list') }}><LeftOutline className='ant' /></p>
          <p>酒店订单</p>
          <p><SearchOutline className='ant' /></p>
        </div>
        <div className='div2'>
        {
            sort.map((item,index) => {
              return <p className={id==item?'p':''} key={index} onClick={()=>{setid(item)}}>{item}</p>
            })
          }
        </div>
      </div>
     <div className='divb'>
     {
        newlist.slice(0,len).map(item=>{
          return <div key={item._id} className='dv3' >
           <p className='p1'><span className='span'><HistogramOutline className='d' />酒店</span><span>{item.type}</span></p><br></br>
           <p className='p2'>{item.jdname}</p>
           <p className='p2'>{item.rddress}</p>
           <p className='p2'>{item.da}到{item.db}.{item.nights}晚{item.num}间</p>
           <p className='p2'>{item.fzname}<span>￥{item.price}</span></p>
           <div className='but'>
           <button className={item.type=='待付款'?'but1':'s'}>取消</button><button className={item.type=='已取消'?'but1':'s'}>再次预定</button><button className={item.type=='待付款'?'but2':'s'}>去支付</button><button className={item.type=='未使用'?'but2':'s'}>去使用</button>

           </div>
          </div>
        })
      }
     </div>
     <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent hasMore={hasMore}/>
      </InfiniteScroll>
    </div>
  )
}
